import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import type { FormInstance } from '@ant-design/pro-components';
import { useRef } from 'react';
import { useModel } from 'umi';
import type { SensorDeviceTableItem, UpdateSensorDeviceType } from '../types.d';
import { message } from 'antd';
import { updateSensorDevice } from '../service';
import { Role } from '@/utils/types.d';
import { queryCompanies } from '@/pages/SystemUser/service';

export default (props: { reload: () => void; currSensor: SensorDeviceTableItem }) => {
  const { reload, currSensor } = props;
  const { initialState } = useModel('@@initialState');
  const userRole = initialState?.currentUser?.role;
  const formRef = useRef<FormInstance>();
  const { _id, deviceSn, manufacturer, ownerId, status, deviceStatus, ownerInfo } = currSensor;
  return (
    <ModalForm<UpdateSensorDeviceType>
      title="修改地磁设备"
      layout="horizontal"
      width="40vw"
      formRef={formRef}
      modalProps={{
        destroyOnClose: true,
      }}
      wrapperCol={{ span: 14 }}
      labelCol={{ span: 6 }}
      initialValues={{
        deviceSn: deviceSn,
        manufacturer: manufacturer,
        ownerId: ownerId,
        status: status,
        deviceStatus: deviceStatus,
      }}
      trigger={<a>编辑</a>}
      onFinish={async (values) => {
        const res = await updateSensorDevice(_id, {
          ...values,
        });
        if (res.success) {
          message.success({
            content: res.message,
            key: 'update_sensorDevice',
          });
          reload();
          formRef.current?.resetFields();
          return true;
        }
        message.error({
          content: res.message,
          key: 'update_sensorDevice',
        });
        return false;
      }}
    >
      <ProFormText
        label="地磁编号"
        width="xl"
        name="deviceSn"
        disabled
        required
        placeholder="请输入地磁编号"
      />
      {/* <ProFormText
        label="地磁厂家"
        width="xl"
        name="manufacturer"
        placeholder="请输入地磁厂家"
        rules={[
          {
            validator: (_, val) => {
              if (val && specialCharReg.test(val))
                return Promise.reject(new Error('地磁厂家不符合规范，不支持包含特殊字符'));
              return Promise.resolve(val);
            },
          },
        ]}
      /> */}
      <ProFormSelect
        label="地磁厂家"
        width="xl"
        name="manufacturer"
        placeholder="请输入地磁厂家"
        options={[
          { value: '目博地磁', label: '目博地磁' },
          { value: '帕玛地磁', label: '帕玛地磁' },
        ]}
      />
      {userRole === Role.ADMIN && (
        <ProFormSelect
          name="ownerId"
          width="xl"
          label="归属公司"
          debounceTime={300}
          showSearch
          placeholder="请选择归属公司(如未找到目标公司，请优先创建[企业管理者])"
          request={(val) => queryCompanies(val.keyWords || ownerInfo?.ownerName)}
        />
      )}
      <ProFormSelect
        label="泊位状态"
        name="status"
        width="xl"
        options={[
          { label: '有车', value: 1 },
          { label: '无车', value: 2 },
        ]}
        placeholder="请选择泊位状态"
      />
      <ProFormSelect
        label="设备状态"
        name="deviceStatus"
        width="xl"
        options={[
          { label: '离线', value: 1 },
          { label: '在线', value: 2 },
        ]}
        placeholder="请选择设备状态"
      />
    </ModalForm>
  );
};
